<template>
<div class="block">
	<el-divider></el-divider>
	<el-row :gutter="20">
		<el-col :span="16"
          ><div class="grid-content bg-purple">
			  <el-tag
				type="plain"
				effect="plain">
				{{ tagname }}
			</el-tag>
			  <el-divider></el-divider>
				<el-timeline>
					<el-timeline-item   placement="top">
						<div v-for="blog in blogpart">
							<el-card>
								<div class="blogtitle">
									<el-link @click="onSubmit(blog)" :underline="false" target="_blank">{{blog.title}}</el-link>
								</div>
								<div>
									<h6>{{blog.descp}}</h6>
								</div>
								<div style="font-size: smaller;">
									<span style="color: #95c4fd;" class="blogtime">{{blog.blogAuthor}}&nbsp;&nbsp;</span><span>提交于 </span><span style="color: #95c4fd;" class="blogtime">&nbsp;{{blog.createTime}}</span>
								</div>
								
							</el-card>
							<el-divider></el-divider>
						</div>
					</el-timeline-item>
				</el-timeline>

			  </div>
		</el-col>
		<el-col :span="8">
		    <div class="grid-content bg-purple">

				<div class="tag">
              <div style="text-align: center">标签栏</div>
              <el-divider style="margin: auto 5px"></el-divider>

              <el-row>
                <el-col :span="24"
                  ><div
                    class="grid-content bg-purple-dark"
                    style="text-align: center"
                  >
                    <nav
                      style="padding: 10px; display: inline-block"
                      v-for="tag in tags"
                    >
                      <el-button plain type="info" @click="OnTag(tag.name)">{{ tag.name }}</el-button>
                    </nav>
                  </div></el-col
                >
              </el-row>
            </div>
			</div>
		</el-col>
	</el-row>
	<el-backtop></el-backtop>
</div>
</template>

<script>
import $ from 'jquery'
export default {
	name: 'blogtag',
	data() {
		return {
			tags: [],
			blogs: [],
			blogpart: [],
			tagname: '',
			user: '',
		};
	},
	methods: {
		OnTag(tagname){
			// console.log("标签id："+tagname);
			sessionStorage.setItem("tagName",tagname);
			this.$router.go(0);
		},
		getBlogList() {
			this.axios.get("http://120.77.213.195:8001/blog/list").then((response) => {
				var Data = response.data;
				this.tags = Data.tags;
				this.blogs = Data.blogs;
				// console.log(Data);
				var part=[];
				var name = this.tagname;
				$.each(Data.blogs, function(index,item){
					// console.log("blog标签名：");
					// console.log(item.tagName);
					$.each(item.tagName, function(index,tagName){
						if(tagName == name){
							console.log(tagName);
							part.push(item);
						}
					});
				});
				if(response.data.code != 0){
					sessionStorage.setItem("loginUser",'');
					this.$router.go(0);
				}
				this.blogpart = part;

			});
   		},
		fetchData () {
			// replace getPost with your data fetching util / API wrapper
			this.tagname = this.$route.params.id;
			this.tagname = sessionStorage.getItem("tagName");
		},
		onSubmit(blog) {
			// console.log(blog);
			this.$router.push({ name: 'detail', params: { id: blog } });
		},
	},
	created() {
		this.fetchData();
		this.getBlogList();
	},
	
}
</script>

<style>
.block {
  padding: 10px 60px 0 60px;
}
.blogtitle{
	text-align: center;
}
</style>